<template>
  <div>
    <vxe-form :data="nodeProps" custom-layout size="medium">
      <div>
        <vxe-form-item title='' :item-render='{}' size="medium">
          <template #default="{ data }">
            <vxe-radio-group v-model="data.assignedType" size="medium">
              <vxe-radio v-for="t in approvalTypes" :label="t.type" style="width: 120px;" size="medium" :key="t.type">{{
                  t.name
                }}
              </vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
      </div>
      <div v-if="nodeProps.assignedType === 'ASSIGN_USER'">
        <vxe-button icon="vxe-icon--plus" status="primary" @click="selectUser" round>选择人员</vxe-button>
        <org-items v-model="nodeProps.assignedUser"/>
      </div>
      <div v-else-if="nodeProps.assignedType === 'SELF_SELECT'">
        <vxe-form-item title='' :item-render='{}'>
          <template #default="{ data }">
            <vxe-radio-group v-model="data.selfSelect.multiple" size="medium">
              <vxe-radio :label="false" size="medium" style="width: 120px;">自选一个人</vxe-radio>
              <vxe-radio :label="true" size="medium" style="margin-left: 10px;width: 120px;">自选多个人</vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
      </div>
      <div v-else-if="nodeProps.assignedType === 'LEADER_TOP'">
        <vxe-form-item title='审批终点' style="font-weight: bold;width: 100%" span="24"></vxe-form-item>
        <vxe-form-item :item-render='{}'>
          <template #default="{ data }">
            <vxe-radio-group v-model="data.leaderTop.endCondition" size="medium">
              <vxe-radio label="TOP" size="medium" style="width: 100%">直到最上层主管</vxe-radio>
              <vxe-radio label="LEAVE" size="medium">不超过发起人的</vxe-radio>
            </vxe-radio-group>
            <div class="approve-end-leave" v-if="nodeProps.leaderTop.endCondition === 'LEAVE'">
              <span>第 </span>
              <vxe-input type="number" style="width: 120px" :min="1" :max="20" :step="1" size="mini"
                         v-model="nodeProps.leaderTop.endLevel"/>
              <span> 级主管</span>
            </div>
          </template>
        </vxe-form-item>
      </div>
      <div v-else-if="nodeProps.assignedType === 'ROLE'">
        <vxe-button icon="vxe-icon--plus" status="primary" @click="selectRole" round>选择角色</vxe-button>
        <org-items :type="orgPickerType" v-model="nodeProps.role"/>
      </div>
      <div v-else-if="nodeProps.assignedType === 'DEPT'">
        <vxe-button icon="vxe-icon--plus" status="primary" @click="selectDepart" round>选择部门</vxe-button>
        <org-items :type="orgPickerType" v-model="nodeProps.dept"/>
      </div>
      <div v-else>
        <span class="item-desc">发起人自己作为审批人进行审批</span>
      </div>

      <el-divider></el-divider>
      <vxe-form-item title='节点id编辑' style="font-weight: bold" span="24">
          <el-input v-model="$store.state.flow.selectedNode.id"></el-input>
      </vxe-form-item>
      <vxe-form-item title='审批人为空时' style="font-weight: bold" span="24"></vxe-form-item>
      <vxe-form-item title='' :item-render='{}'>
        <template #default="{ data }">
          <vxe-radio-group v-model="data.nobody.handler">
            <vxe-radio label="TO_PASS" style="width: 120px;" size="medium">自动通过</vxe-radio>
            <vxe-radio :disabled="true" label="TO_REFUSE" style="width: 120px;" size="medium">自动退回</vxe-radio>
            <!--          <vxe-radio label="TO_ADMIN"  style="width: 120px;" size="medium">转交审批管理员</vxe-radio>-->
            <vxe-radio :disabled="true" label="TO_USER" style="width: 120px;" size="medium">转交到指定人员</vxe-radio>
          </vxe-radio-group>
          <div style="margin-top: 10px" v-if="data.nobody.handler === 'TO_USER'">
            <vxe-button icon="vxe-icon--plus" status="primary" @click="selectNoSetUser" round>选择人员</vxe-button>
            <org-items v-model="data.nobody.assignedUser" :type="orgPickerType"/>
          </div>
        </template>
      </vxe-form-item>

      <div v-if="showMode">
        <vxe-form-item title='多人审批时审批方式' style="font-weight: bold" span="24"></vxe-form-item>
        <vxe-form-item title='' :item-render='{}'>
          <template #default="{ data }">
            <vxe-radio-group v-model="data.mode" size="medium">
              <vxe-radio label="NEXT" size="medium" style="width: 100%" disabled>按选择顺序依次审批，每个人必须同意</vxe-radio>
              <vxe-radio label="AND" size="medium" style="width: 100%" disabled>同时审批，每个人必须同意</vxe-radio>
              <vxe-radio label="OR" size="medium" style="width: 100%" >有一人同意即可</vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
      </div>
      <!-- <div>
        <vxe-form-item title='审批同意时是否需要签字' style="font-weight: bold" span="24" ></vxe-form-item>
        <vxe-form-item title='' :item-render='{}'>
          <template #default="{ data }">
            <vxe-switch v-model='data.sign' open-label='需要' :open-value='true' close-label='不用'
                        :close-value='false'></vxe-switch>
          </template>
        </vxe-form-item>
      </div> -->
      <div>
        <vxe-form-item title='审批期限（超时自动提醒，为 0 则不生效）' style="font-weight: bold" span="24"></vxe-form-item>
        <vxe-form-item title='' :item-render='{}'>
          <template #default="{ data }">
            <vxe-input :disabled="true" style="width: 180px;" placeholder="时长" type="number"
                       v-model="data.timeLimit.timeout.value">
            </vxe-input>
            <vxe-select :disabled="true" style="width: 75px;"
                        v-model="data.timeLimit.timeout.unit"
                        placeholder="请选择">
              <vxe-option label="秒" value="S"></vxe-option>
              <vxe-option label="分钟" value="M"></vxe-option>
              <vxe-option label="小时" value="H"></vxe-option>
              <vxe-option label="天" value="D"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
      </div>
      <div>
        <vxe-form-item title='如果审批被退回' style="font-weight: bold" span="24"></vxe-form-item>
        <vxe-form-item title='' :item-render='{}'>
          <template #default="{ data }">
            <vxe-radio-group :disabled="true" v-model="data.refuse.type" size="medium">
              <vxe-radio label="TO_BEFORE" size="medium" style="width: 100%">退回到上级审批节点</vxe-radio>
              <vxe-radio label="TO_NODE" size="medium" style="width: 100%">退回到指定节点</vxe-radio>
              <vxe-radio label="TO_SELECT" size="medium" style="width: 100%">审批人自选退回节点</vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
      </div>
      <div v-if="nodeProps.refuse.type === 'TO_NODE'">
        <vxe-form-item title='指定节点' :item-render='{}'>
          <template #default="{ data }">
            <vxe-select style="margin-left: 10px; width: 150px;" placeholder="选择退回节点" transfer
                        v-model="data.refuse.target">
              <vxe-option v-for="(node, i) in nodeOptions" :key="i" :label="node.name" :value="node.id"
                          transfer></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
      </div>
    </vxe-form>

    <org-picker :title="pickerTitle" :multiple="orgPickerMutile" :type="orgPickerType" ref="orgPicker"
                :selected="orgPickerSelected"
                @ok="selected"/>
  </div>
</template>

<script>
import OrgPicker from "@/components/common/OrgPicker";
import OrgItems from "../OrgItems";

export default {
  name: "ApprovalNodeConfig",
  components: {OrgPicker, OrgItems},
  props: {
    config: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      orgPickerMutile: true,
      showOrgSelect: false,
      orgPickerSelected: [],
      orgPickerType: 'role',
      approvalTypes: [
        // {name: '指定人员', type: 'ASSIGN_USER'},
        // {name: '发起人自选', type: 'SELF_SELECT'},
        // {name: '多级主管', type: 'LEADER_TOP'},
        // {name: '主管', type: 'LEADER'},原本注释
        {name: '角色', type: 'ROLE'},
        // {name: '部门', type: 'DEPT'},
        {name: '发起人自己', type: 'SELF'},
        // {name: '表单内联系人', type: 'FORM_USER'} 原本注释
      ]
    }
  },
  mounted(){

  },
  computed: {
    nodeProps() {
      return this.$store.state.flow.selectedNode.props
    },
    select() {
      return this.config.assignedUser || []
    },
    forms() {
      return this.$store.state.flow.design.formItems.filter(f => {
        return f.name === 'UserPicker'
      })
    },
    pickerTitle() {
      switch (this.orgPickerType) {
        case 'user':
          return '请选择人员';
        case 'role':
          return '请选择角色';
        case 'dept':
          return '请选择部门';
        default:
          return null;
      }
    },
    nodeOptions() {
      let values = []
      const excType = ['CC', 'EMPTY', "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS"]
      this.$store.state.flow.nodeMap.forEach((v) => {
        if (excType.indexOf(v.type) === -1) {
          values.push({id: v.id, name: v.name})
        }
      })
      return values
    },
    showMode() {
      switch (this.nodeProps.assignedType) {
        case "ASSIGN_USER":
          return this.nodeProps.assignedUser.length > 0;
        case "SELF_SELECT":
          return this.nodeProps.selfSelect.multiple;
        case "LEADER_TOP":
          return true;
        case "FORM_USER":
          return true;
        case "ROLE":
          return true;
        case "DEPT":
          return true;
        default:
          return false;
      }
    }
  },
  methods: {
    selectUser() {
      
      this.orgPickerSelected = this.select
      this.orgPickerMutile = true
      this.orgPickerType = 'user'
      this.$refs.orgPicker.show()
    },
    selectNoSetUser() {
      

      this.orgPickerSelected = this.config.nobody.assignedUser
      this.orgPickerType = 'user'
      this.orgPickerMutile = false
      this.$refs.orgPicker.show()
    },
    selectRole() {
      
      this.orgPickerSelected = this.config.role
      this.orgPickerMutile = true
      this.orgPickerType = 'role'
      this.$refs.orgPicker.show()
    },
    selectDepart() {
      

      this.orgPickerSelected = this.config.dept
      this.orgPickerMutile = true
      this.orgPickerType = 'dept'
      this.$refs.orgPicker.show()
    },
    selected(select) {
      // this.orgPickerSelected.length = 0
      select.forEach(val => this.orgPickerSelected.push(val))
    },
    removeOrgItem(index) {
      this.select.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>

:deep .approve-mode {
  .el-radio {
    float: left;
    width: 100%;
    display: block;
    margin-top: 15px;
  }
}

:deep .approve-end {
  position: relative;

  .approve-end-leave {
    position: absolute;
    bottom: -5px;
    left: 150px;
  }
}


:deep .vxe-radio {
  margin-bottom: 15px;
}

:deep .vxe-radio:not(.vxe-radio-button) + .vxe-radio {
  margin-left: 0px;
}

.item-desc {
  color: #939494;
}
</style>
